<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/style.css"/>
	</head>
	<!--em 相对于父元素的大小-->
	<!--rem 在html根的位置设置font-size，rem就是根据这个font-size来计算-->
	<body>
		
		<div class="div">
			这是一个测试的div
			
			<p>这是个测试的p标签</p>
		</div>
		<script type="text/javascript">
			function recalc() {
				var clientWidth = document.documentElement.clientWidth;
				if(!clientWidth) return;
				document.documentElement.style.fontSize = 20 * (clientWidth / 320) + 'px';
			}

			function initRecalc() {
				recalc();
				var resizeEvt = 'osrientationchange' in window ? 'orientationchange' : 'resize';
				if(!document.addEventListener) return;
				window.addEventListener(resizeEvt, recalc, false);
				document.addEventListener('DOMContentLoaded', recalc, false);
			}
			initRecalc();

		</script>
	</body>
</html>
